<template>
  <div class="right-container">
    <section class="charts-container">
      <div class="pie-charts" id="pieCharts"></div>
    </section>
    <section class="btn-groups">
      <Button context="点击增加综合室人数" />
      <Button context="点击减少综合室人数" />
    </section>
  </div>
</template>

<script>
let echarts = require("echarts");
import Button from "@/components/Button/index.vue";
import { getUsersUDparts } from "@/service/home.js";

export default {
  components: {
    Button,
  },
  data() {
    return {
      option: {},
    };
  },
  methods: {
    async drawCharts() {
      echarts.dispose(document.getElementById("pieCharts"));
      var pieCharts = echarts.init(document.getElementById("pieCharts"));
      await this.setOption();
      pieCharts.setOption(this.option);
    },
    async setOption(event) {
      let data = [];
      let dparts = await getUsersUDparts.bind(this)(false);
      for (let dpart of dparts.data) {
        data.push({
          value: dpart.total,
          name: dpart.title,
        });
      }

      this.option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            roseType: "area",
            data,
          },
        ],
      };
    },
  },
  mounted() {
    this.drawCharts();
  },
};
</script>

<style lang= "scss">
.right-container {
  .charts-container {
    .pie-charts {
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: center;
    }
  }
  .btn-groups {
    text-align: center;
  }
}
</style>